<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<!--
			directive 在使用隔离 scope 的时候，提供了三种方法同隔离之外的地方交互。这三种分别是
		    @ 绑定一个局部 scope 属性到当前 dom 节点的属性值。结果总是一个字符串，因为 dom 属性是字符串。
		    & 提供一种方式执行一个表达式在父 scope 的上下文中。如果没有指定 attr 名称，则属性名称为相同的本地名称。
		    = 通过 directive 的 attr 属性的值在局部 scope 的属性和父 scope 属性名之间建立双向绑定。
		   directive 在使用隔离 scope 的时候，提供了三种方法同隔离之外的地方交互。这三种分别是
   		   @ 绑定一个局部 scope 属性到当前 dom 节点的属性值。结果总是一个字符串，因为 dom 属性是字符串。
   		   & 提供一种方式执行一个表达式在父 scope 的上下文中。如果没有指定 attr 名称，则属性名称为相同的本地名称。
   		  = 通过 directive 的 attr 属性的值在局部 scope 的属性和父 scope 属性名之间建立双向绑定。
		 @ 局部 scope 属性
		@ 方式局部属性用来访问 directive 外部环境定义的字符串值，
		主要是通过 directive 所在的标签属性绑定外部字符串值。
		这种绑定是单向的，即父 scope 的绑定变化，directive 中的 scope 的属性会同步变化，
		而隔离 scope 中的绑定变化，父 scope 是不知道的。

如下示例：directive 声明未隔离 scope 类型，并且使用@绑定 name 属性，在 directive 中使用 name 属性绑定父 scope 中的属性。当改变父 scope 中属性的值的时候，directive 会同步更新值，当改变 directive 的 scope 的属性值时，父 scope 无法同步更新值。

		-->
		<div ng-controller="myController" ng-app="app">
			<div class="result">
				<!--<div>父scope：
					<div>Say：{{name}}<br>改变父scope的name：<input type="text" value="" ng-model="name" /></div>
				</div>-->
		     	<!--<div>隔离scope：
					<div isolated-directive name="{{name}}"></div>	
				</div>-->
		    	<div>隔离scope（不使用{{name}}）：
					<div isolated-directive name="name"></div>
				</div>
			</div>
		</div>
			<script type="text/javascript" src="../js/angular.js"></script>
			<script>
				var app = angular.module("app", []);
				app.controller("myController", function($scope) {
					$scope.name = "hello world";
				}).directive("isolatedDirective", function() {
					return {
						scope: {
							name: "@"
						},
						template: 'Say：{{name}} <br>改变隔离scope的name：<input type="buttom" value="" ng-model="name">'
					}
				})
			</script>
	</body>

</html>